<template>
	<div class="user-list">
		<div style="margin: 20px 0">
			<el-button type="primary" @click="addType"
				>添加商品分组类型</el-button
			>
		</div>
		<el-table :data="types" style="width: 100%">
			<el-table-column prop="id" label="ID" />
			<el-table-column prop="name" label="商品分组类型" />
			<el-table-column label="操作">
				<template #default="scope">
					<el-button type="primary" @click="updateType(scope.row)"
						>编辑</el-button
					>
					<el-button type="danger" @click="delType(scope.row)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog
			v-model="dialogInfo.visible"
			:title="dialogInfo.title"
			width="30%"
			:close-on-click-modal="false"
			:destroy-on-close="true"
		>
			<el-form
				ref="ruleFormRef"
				:model="form"
				:rules="rules"
				label-width="80px"
			>
				<el-form-item label="商品分组类型" prop="name">
					<el-input v-model="form.name" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm(ruleFormRef)"
						>确定
					</el-button>
					<el-button @click="resetForm(ruleFormRef)">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { add, del, list, update } from "@/api/types";

import { ElMessage } from "element-plus";

const ruleFormRef = ref();

const types = ref([]);
const dialogInfo = reactive({
	title: "添加商品分组类型",
	visible: false,
	type: 0,
});

const form = reactive({
	name: "",
	id: 0,
});

const rules = reactive({
	name: [{ required: true, message: "请输入类型名称", trigger: "blur" }],
});

onMounted(() => {
	getTypes();
});

const getTypes = async () => {
	try {
		const res = await list();
		types.value = res.result;
	} catch (err) {
		console.error(err);
	}
};

const addType = () => {
	form.id = "";
	form.name = "";
	dialogInfo.type = 0;
	dialogInfo.title = "添加商品分组类型";
	dialogInfo.visible = true;
};

const updateType = row => {
	form.id = row.id;
	form.name = row.name;
	dialogInfo.type = 1;
	dialogInfo.title = "修改商品分组类型";
	dialogInfo.visible = true;
};

const submitForm = async formEl => {
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			if (!dialogInfo.type) {
				await add({
					name: form.name,
				});
				ElMessage.success("添加成功");
				resetForm(ruleFormRef.value);
				getTypes();
				return;
			}

			await update(form);
			ElMessage.success("修改成功");
			resetForm(ruleFormRef.value);
			getTypes();
		}
	});
};

const delType = async row => {
	await del({
		id: row.id,
	});
	ElMessage.success("删除成功");
	getTypes();
};

const resetForm = formEl => {
	if (!formEl) return;
	formEl.resetFields();
	dialogInfo.visible = false;
};
</script>
<style scoped>
.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>
